<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head th:include="/demo/header" />

<body>
    
    <section class="content-header">
        <h1>容器管理</h1>
    </section>
    <section class="content">
        <div class="box box-solid">
            <div class="box-body">
                <form id="searchbar" class="form-horizontal form-search">
                	<div class="form-group">
	                    <div class="col-md-12">
		                    <div class="pull-right">
		                        <button type="button" style="width:100px" class="btn btn-primary tonto-btn-search" onclick="table.refresh()"><i class="fa fa-search"></i>查询</button>
		                        <button type="button" style="width:100px" class="btn btn-default" onclick="$('#searchbar').resetSearch()"><i class="fa fa-repeat"></i>重置</button>
		                    </div>
		                </div>
	                </div>
                    <!-- 表单仅有一个text-input时回车会提交表单，这里添加一个无用的防止回车提交 -->
                    <input type="text" style="display:none">
                </form>
                <input type="hidden" id="pageLimit" th:value="${query?.limit}" />
                <input type="hidden" id="pageOffset" th:value="${query?.offset}" />
            </div>
        </div>
        <div class="box box-solid" style="margin-top:20px">
            <div id="result" class="box-body">
                <table id="dataGrid"></table>
                <div id="toolbar">
                    <div class="btn-group">
                    </div>
                </div>
            </div>
        </div>
    </section>
    <div th:include="/demo/footer" />
    <script type="text/javascript">
    var table;
    $(function() {
        initDataGrid();
    });

    function initDataGrid() {
        table = $.createTable("#dataGrid", {
            idField: "id",
            columns: [
                [
                    { title: "容器", field: "id" },
					{ title: "版本", field: "version" },
					{ title: "上次更新时间", field: "updateTime", formatter:"datetime" },
                    {
                        title: "操作",
                        align: "center",
                        width: "100px",
                        events: {
                            'click .restart': function(e, value, row, index) {
                                restart(row);
                            }
                        },
                        formatter: function operateFormatter(value, row, index) {
                            return '<button class="restart btn btn-xs btn-success" style="margin-right:10px"><i class="glyphicon glyphicon-refresh"></i>重启</button>';
                        }
                    }
                ]
            ],
            url: '/common/container/find/all',
            searchbar: '#searchbar',
            showColumns: true,
            pagination: false,
            toolbar: "#toolbar",
            showRefresh: true
        });
    }


    function restart(row) {
        if (row) {
            layer.confirm('确定重启吗?', function() {
                $.getAjax('/common/container/restart?container=' + row.id, function(result) {
                    $.successMessage("重启成功，耗时：" + (result/ 1000).toFixed(2) + "秒" );
                    table.refresh();
                });
            });
        }
    }
    </script>
</body>

</html>